<!--
 * @Description:: 请补充填写
 * @Version: 1.0
 * @Author: smallWhite
 * @Date: 2023-08-13 11:20:01
 * @LastEditors: smallWhite
 * @LastEditTime: 2023-08-13 14:58:23
 * @FilePath: /siana_admin/src/views/notice/components/list.vue
-->
<template>
  <el-card>
    <div class="editor_box">
      <Editor :value="content"
        @change="changeNotice" />
      <div v-if="disabled"
        class="disabled_box">
      </div>
    </div>
    <div class="card-footer"
      style="margin-top: 20px;text-align: right;">
      <el-button
        v-if="disabled"
        type="primary"
        @click="disabled = !disabled">编辑</el-button>
      <template
        v-if="!disabled">
        <el-button
          type="primary"
          @click="saveNotice">保存</el-button>
        <el-button
          @click="disabled = !disabled">取消</el-button>
      </template>

    </div>
  </el-card>
</template>

<script>
import Editor from '@/components/quill_editor/index.vue'
export default {
  components: {
    Editor
  },
  data() {
    return {
      content: '',
      id: '1',
      disabled: true
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    changeNotice(value) {
      this.content = value
    },
    getData() {
      this.$https('NOTICELIST', {
        pageNumber: 1,
        pageSize: 10
      }).then(res => {
        this.content = res.data.records[0].content
      })
    },
    saveNotice() {
      this.$https('NOTICEEDIT', {
        id: 1,
        content: this.content
      }).then(res => {
        this.$message.success('保存成功')
        this.disabled = !this.disabled
        this.getData()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.editor_box {
  position: relative;
  padding-bottom: 15px;
  .disabled_box {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.05);
    z-index: 1000;
    left: 0;
    top: 0;
    padding-bottom: 20px;
  }
}
</style>
